<template>
  <div>
    <image :style="{width:width+'px',height:height+'px'}" src="https://m.xinhehui.com/static/img/login-bg.87ba74f.jpg"></image>
    <div class="form-container" :style="{width:width+'px',height:height+'px'}">
      <div class="form">
        <div class="form-item form-item-input">
           <myInput :type="'text'" :placeholder="'手机号'" :value="mobile" return-key-type="default" class="input" v-model="mobile" />
        </div>
        <div class="form-item form-item-input">
          <myInput :type="'password'" :placeholder="'登录密码'" return-key-type="default" class="input" v-model="password" :value="password"/>
        </div>
        <div class="form-item">
          <my-Button value="登录" @login="login" type="primary" size="screen" :disabled="formButtonDisable"></my-Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const storage = weex.requireModule('storage')
import myButton from '../components/ui/button.vue'
import myInput from '../components/ui/input.vue'
import { Tip } from '../util'
import { mapGetters } from 'vuex'
import urlService from 'urlService'

module.exports = {
  data: function(){
	 return {
      mobile:'',
      password:''
    };
	},
  computed: {
    ...mapGetters({
        isNeedIdentify: 'getNeedIdentify'
    }),
    // 仅读取，值只须为函数
    formButtonDisable: function () {
      return this.mobile === '' || this.password ===''
    },
  },
  components: {
    'my-Button': myButton,
    'myInput': myInput
  },
  created:function(){
    this.width = weex.config.env.deviceWidth;
    this.height = weex.config.env.deviceHeight;
  },
  mounted: function() {
      //commit(types.SET_IS_NEED_IDENTIFY, 1)
  },
  methods:{
    login: function(){
      if(!this.formButtonDisable){
        if (!(/^1[3|4|5|7|8]\d{9}$/.test(this.mobile))) {
          Tip.show('手机号码格式错误')
          return
        }
        
        let formObj = {account:this.mobile,password:this.password};
        
        let promise = this.$store.dispatch('doLogin', formObj)
        
        promise.then(data => {
          if (data && data.boolen) {
            Tip.show(message.loginSuccess)
            //urlService.redirectAfterLogin()
          }
        })
      }
    }
  }
}
</script>
<style>
/*登录模块*/
.form-container{
  margin-top: 200px;
  padding-left: 50px;
  padding-right: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.form-item-button{
  background: #10a0eb;
  width: 750px;
  height: 100px;
}
.button {
  font-size: 36;
  width: 200;
  color: #41B883;
  text-align: center;
  padding-top: 10;
  padding-bottom: 10;
  border-width: 2;
  border-style: solid;
  margin-right: 20;
  
  color: #8fbee2;
}
</style>